<script type="text/x-template" id="cc-page-wrapper">
    <div>
        <div class="search">
            <el-form ref="searchForm" label-width="80px" :model="search">
                <slot name="search">
                    <el-form-item style="display: inline-block" label="自增ID">
                        <el-input v-model="search.id" clearable></el-input>
                    </el-form-item>
                </slot>
                <!-- 按钮 -->
                <el-form-item style="display: inline-block">
                    <el-button type="primary" @click="handleSearch()">查询</el-button>
                    <el-button type="warning" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content-list">
            <slot name="content"></slot>
        </div>
        <div class="page">
            <el-pagination
                    background
                    @size-change="handlePageSizeChange"
                    @current-change="handlePageChange"
                    :current-page="handlePageChange"
                    :page-sizes="[5, 10, 15, 20, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=parseInt(page.total)>
            </el-pagination>
        </div>
    </div>
</script>

<script>
    Vue.component('cc-page-wrapper', {
        template: '#cc-page-wrapper',
        props: ['page', 'search'],
        methods: {
            handlePageSizeChange(size) {
                this.$set(this.page, 'currentPage', 1)
                this.$set(this.page, 'pageSize', size)
                this.emitFilterChange('pagination')
            },
            handlePageChange(page) {
                this.$set(this.page, 'currentPage', page)
                this.emitFilterChange('pagination')
            },
            emitFilterChange(type, filter) {
                this.$emit('filter-change', type, filter)
            },
            handleSearch(){
                this.$emit('filter-change', 'query', this.search)
            },
            resetForm() {
                this.search = {}
                this.$refs.searchForm.resetFields();
                this.$set(this.page, 'currentPage', 1)
                this.$set(this.page, 'pageSize', 10)
                this.$emit('filter-reset')
            },
        },
        watch: {},
        mounted() {

        },
        created() {
        }
    })
</script>

<style>
    .search {
        margin-top: 20px;
        margin-left: 30px;
    }

    .content-list {
        margin-top: 20px;
        margin-left: 30px;
    }

    .page .el-pagination {
        padding: 0;
        margin-top: 30px;
        button: last-child;
    }

    .page .el-pagination__total {
        margin-left: 30px;
        margin-right: 100px;
    }
    .page .el-pagination__sizes{
        margin-right: 0;
    }

</style>